<template>
  <div class="artistic-background">
    <!-- 渐变背景层 -->
    <div class="artistic-background__gradient"></div>
    
    <!-- 水波纹效果层 -->
    <div class="artistic-background__waves">
      <div class="wave wave-1"></div>
      <div class="wave wave-2"></div>
      <div class="wave wave-3"></div>
    </div>
    
    <!-- 粒子层 -->
    <canvas ref="particleCanvas" class="artistic-background__particles"></canvas>
    
    <!-- 动态光斑层 -->
    <div class="artistic-background__orbs">
      <div class="orb orb-1"></div>
      <div class="orb orb-2"></div>
      <div class="orb orb-3"></div>
    </div>
    
    <!-- 装饰性元素 -->
    <div class="artistic-background__decorations">
      <div class="decoration decoration-1"></div>
      <div class="decoration decoration-2"></div>
      <div class="decoration decoration-3"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 粒子画布引用
const particleCanvas = ref(null);
let ctx = null;
let animationId = null;
let particles = [];

// 粒子类 - 文艺风格的轻柔粒子
class Particle {
  constructor(canvas) {
    this.canvas = canvas;
    this.reset();
  }
  
  reset() {
    this.x = Math.random() * this.canvas.width;
    this.y = Math.random() * this.canvas.height;
    this.size = Math.random() * 3 + 1;
    this.speedX = (Math.random() - 0.5) * 0.3;
    this.speedY = (Math.random() - 0.5) * 0.3;
    this.opacity = Math.random() * 0.4 + 0.1;
    this.pulseSpeed = Math.random() * 0.01 + 0.005;
    this.pulsePhase = Math.random() * Math.PI * 2;
    this.color = Math.random() > 0.5 ? '#E6F4FF' : '#BAE0FF';
  }
  
  update() {
    this.x += this.speedX;
    this.y += this.speedY;
    this.pulsePhase += this.pulseSpeed;
    
    // 边界检查
    if (this.x < 0 || this.x > this.canvas.width) this.speedX *= -1;
    if (this.y < 0 || this.y > this.canvas.height) this.speedY *= -1;
    
    // 确保粒子在画布内
    this.x = Math.max(0, Math.min(this.canvas.width, this.x));
    this.y = Math.max(0, Math.min(this.canvas.height, this.y));
  }
  
  draw(ctx) {
    const pulseFactor = Math.sin(this.pulsePhase) * 0.2 + 0.8;
    ctx.save();
    ctx.globalAlpha = this.opacity * pulseFactor;
    ctx.fillStyle = this.color;
    ctx.shadowBlur = 15;
    ctx.shadowColor = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size * pulseFactor, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
  }
}

// 初始化粒子
const initParticles = () => {
  const canvas = particleCanvas.value;
  if (!canvas) return;
  
  const particleCount = Math.min(50, Math.floor((canvas.width * canvas.height) / 30000)); // 减少粒子数量，更符合文艺风格
  particles = [];
  
  for (let i = 0; i < particleCount; i++) {
    particles.push(new Particle(canvas));
  }
};

// 创建水波纹动画
const createWaveAnimation = () => {
  // 水波纹效果已通过CSS动画实现
  // 这里可以添加额外的JavaScript控制逻辑
};

// 创建装饰元素动画
const createDecorationAnimation = () => {
  // 装饰元素动画已通过CSS动画实现
  // 这里可以添加额外的JavaScript控制逻辑
};

// 动画循环
const animate = () => {
  const canvas = particleCanvas.value;
  if (!canvas || !ctx) return;
  
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 更新和绘制粒子
  particles.forEach(particle => {
    particle.update();
    particle.draw(ctx);
  });
  
  // 绘制粒子之间的连线 - 更加柔和
  for (let i = 0; i < particles.length; i++) {
    for (let j = i + 1; j < particles.length; j++) {
      const dx = particles[i].x - particles[j].x;
      const dy = particles[i].y - particles[j].y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      
      if (distance < 150) {
        ctx.save();
        ctx.globalAlpha = (1 - distance / 150) * 0.15;
        ctx.strokeStyle = '#E6F4FF';
        ctx.lineWidth = 0.8;
        ctx.setLineDash([5, 10]);
        ctx.beginPath();
        ctx.moveTo(particles[i].x, particles[i].y);
        ctx.lineTo(particles[j].x, particles[j].y);
        ctx.stroke();
        ctx.restore();
      }
    }
  }
  
  animationId = requestAnimationFrame(animate);
};

// 设置画布大小
const resizeCanvas = () => {
  const canvas = particleCanvas.value;
  if (!canvas) return;
  
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  
  // 重新初始化粒子
  initParticles();
};

// 组件挂载时初始化
onMounted(() => {
  const canvas = particleCanvas.value;
  if (!canvas) return;
  
  ctx = canvas.getContext('2d');
  resizeCanvas();
  
  // 监听窗口大小变化
  window.addEventListener('resize', resizeCanvas);
  
  // 开始动画
  animate();
});

// 组件卸载时清理
onUnmounted(() => {
  window.removeEventListener('resize', resizeCanvas);
  if (animationId) {
    cancelAnimationFrame(animationId);
  }
});
</script>

<style scoped>
.artistic-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

/* 渐变背景层 - 文艺风格的浅蓝色渐变 */
.artistic-background__gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f4ff 25%, #bae0ff 50%, #e6f4ff 75%, #f0f8ff 100%);
  z-index: 1;
}

/* 水波纹效果层 */
.artistic-background__waves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
}

.wave {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: radial-gradient(ellipse at center, rgba(186, 224, 255, 0.3) 0%, rgba(230, 244, 255, 0) 70%);
  border-radius: 45%;
  opacity: 0.6;
}

.wave-1 {
  animation: wave-animation 20s infinite linear;
}

.wave-2 {
  animation: wave-animation 25s infinite linear reverse;
  animation-delay: -5s;
}

.wave-3 {
  animation: wave-animation 30s infinite linear;
  animation-delay: -10s;
}

/* 粒子层 */
.artistic-background__particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

/* 动态光斑层 - 文艺风格的柔和光斑 */
.artistic-background__orbs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
}

.orb-1 {
  width: 400px;
  height: 400px;
  top: -200px;
  left: -200px;
  background: radial-gradient(circle, rgba(230, 244, 255, 0.8) 0%, rgba(230, 244, 255, 0) 70%);
  animation: float 25s infinite ease-in-out;
}

.orb-2 {
  width: 500px;
  height: 500px;
  bottom: -250px;
  right: -250px;
  background: radial-gradient(circle, rgba(186, 224, 255, 0.7) 0%, rgba(186, 224, 255, 0) 70%);
  animation: float 30s infinite ease-in-out reverse;
}

.orb-3 {
  width: 350px;
  height: 350px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(240, 248, 255, 0.6) 0%, rgba(240, 248, 255, 0) 70%);
  animation: pulse 20s infinite ease-in-out;
}

/* 装饰性元素 */
.artistic-background__decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
}

.decoration {
  position: absolute;
  opacity: 0.3;
}

.decoration-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  right: 5%;
  border: 2px solid rgba(186, 224, 255, 0.3);
  border-radius: 50%;
  animation: rotate 60s infinite linear;
}

.decoration-2 {
  width: 200px;
  height: 200px;
  bottom: 15%;
  left: 8%;
  border: 1px solid rgba(230, 244, 255, 0.4);
  border-radius: 50%;
  animation: rotate 45s infinite linear reverse;
}

.decoration-3 {
  width: 150px;
  height: 150px;
  top: 60%;
  right: 15%;
  border: 1px solid rgba(240, 248, 255, 0.5);
  border-radius: 50%;
  animation: rotate 30s infinite linear;
}

/* 动画定义 */
@keyframes wave-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(80px, -40px) scale(1.05);
  }
  50% {
    transform: translate(-40px, 80px) scale(0.95);
  }
  75% {
    transform: translate(40px, 40px) scale(1.02);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.6;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .orb-1 {
    width: 300px;
    height: 300px;
    top: -150px;
    left: -150px;
  }
  
  .orb-2 {
    width: 350px;
    height: 350px;
    bottom: -175px;
    right: -175px;
  }
  
  .orb-3 {
    width: 250px;
    height: 250px;
  }
  
  .decoration-1 {
    width: 200px;
    height: 200px;
  }
  
  .decoration-2 {
    width: 150px;
    height: 150px;
  }
  
  .decoration-3 {
    width: 100px;
    height: 100px;
  }
}
</style>